import React from "react";
import styles from "./detail.less";
import { Button, Modal, Form, Input, Radio, Select, Icon, Checkbox, Col, Row } from "antd";
import UserSession from "@/UserSession";
import { formatMessage } from "umi-plugin-react/locale";

const AddSystemKnowledge = Form.create({ name: "form_in_modal" })(
	class extends React.Component {
		render() {
			const { visible, onCancel, onCreate, form } = this.props;
			const { getFieldDecorator } = form;
			const formItemLayout = {
				labelCol: {
					xs: { span: 24 },
					sm: { span: 4 },
				},
				wrapperCol: {
					xs: { span: 24 },
					sm: { span: 18 },
				},
			};
			const tailFormItemLayout = {
				wrapperCol: {
					xs: {
						span: 24,
						offset: 0,
					},
					sm: {
						span: 18,
						offset: 4,
					},
				},
			};
			// title={formatMessage({ id: 'systemKnowledgeBase.addKnowledgeBaseTitle' })}
			return (
				<Modal
					visible={visible}
					okText={formatMessage({ id: 'systemKnowledgeBase.confirm' })}
					cancelText={formatMessage({ id: 'systemKnowledgeBase.cancel' })}
					onCancel={onCancel}
					onOk={onCreate} destroyOnClose
					closable={false}
					bodyStyle={{ padding: 0 }}
					width={715}
					cancelButtonProps={{ type: "primary", ghost: true }}
				>
					<div style={{ position: "relative" }}>
						<img src={staticPath + '/sysKnowledge/addBg.png'} style={{ width: 715 }} />
						<Icon style={{ position: "absolute", right: 24, top: 24, cursor: "pointer", color: "#000000" }} type="close" onClick={onCancel} />
					</div>
					<div style={{ margin: '24px 0', color: '#000000', fontSize: '20px', fontWeight: "500", paddingLeft: 32 }}>{formatMessage({ id: 'systemKnowledgeBase.addKnowledgeBaseTitle' })}</div>
					<Form>
						<Form.Item label={formatMessage({ id: 'systemKnowledgeBase.knowledgeBaseNameLabel' })} style={{ margin: 0 }} {...formItemLayout}>
							{getFieldDecorator("name", {
								rules: [{ required: true, message: formatMessage({ id: 'systemKnowledgeBase.knowledgeBaseNameRequired' }) }],
							})(<Input />)}
						</Form.Item>
						<Form.Item style={{ margin: 0 }} {...tailFormItemLayout}>
							{getFieldDecorator("type", {
								rules: [{ required: true, message: formatMessage({ id: 'systemKnowledgeBase.knowledgeBaseTypeRequired' }) }],
							})(
								<Checkbox.Group style={{ width: '100%' }} className={styles.FormCheckbox}>
									<Row>
										<Col span={6}>
											<Checkbox value="qa">{formatMessage({ id: 'systemKnowledgeBase.qaKnowledge' })}</Checkbox>
										</Col>
										{UserSession.hasAtlasKnowledge() ? (
											<Col span={6}>
												<Checkbox value="graph">{formatMessage({ id: 'systemKnowledgeBase.mapKnowledge' })}</Checkbox>
											</Col>
										) : null}
										{UserSession.hasDialogKnowledge() ? (
											<Col span={6}>
												<Checkbox value="dialog">{formatMessage({ id: 'systemKnowledgeBase.multiturnKnowledge' })}</Checkbox>
											</Col>
										) : null}
										<Col span={6}>
											<Checkbox value="keywordReply">{formatMessage({ id: 'systemKnowledgeBase.keywordReply' })}</Checkbox>
										</Col>
									</Row>
								</Checkbox.Group>
							)}
						</Form.Item>
					</Form>
				</Modal>
			);
		}
	}
);

export default AddSystemKnowledge;
